import React, { Component } from 'react'
import RouteTable from './RouteTable'
import { connect } from 'react-redux'
import * as actions from './store/action'

class RouteConfig extends Component {

    componentDidMount() {
        this.props.getRoutes();
    }

    render() {

        const { data } = this.props;
        return (
           <>
                <RouteTable
                    data={data}
                    createRoute={this.createRoute}
                    changeRoute={this.changeRoute}
                    deleteRoute={this.deleteRoute}
                />
           </>
        )
    }

    deleteRoute = (key) => {
        console.log('删除路由', key)
        this.props.deleteRoutes(key)
    }

    createRoute = (value) => {
        console.log('创建路由', value)
        console.log(JSON.stringify(value))
        this.props.createRoutes(value)
    }

    changeRoute = (value) => {
        console.log('修改路由', value)
        this.props.changeRoutes(value)
    }

}

const mapStateToProps = (state) => ({
    data: state.routerConfig.data
})

const mapDispatchToProps = (dispatch) => ({
    getRoutes() {
        dispatch(actions.getRouterRequest())
    },
    createRoutes(value) {
        dispatch(actions.createRouterRequest(value))
    },
    changeRoutes(value) {
        dispatch(actions.changeRouterRequest(value))
    },
    deleteRoutes(id) {
        dispatch(actions.deleteRouterRequest(id))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(RouteConfig);
